<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <title>首页 - 驴妈妈统计系统</title>
    <meta name="description" content="overview &amp; stats" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

    <link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="${rc.contextPath}/assets/font-awesome/4.2.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery-ui.custom.min.css" />
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery.gritter.min.css" />
    <link rel="stylesheet" href="${rc.contextPath}/assets/fonts/fonts.googleapis.com.css" />
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrapValidator.min.css" />
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/bsie-paginator.css" />
    <link rel="stylesheet" href="${rc.contextPath}/stylesheets/daterangepicker.css">
    <link rel="stylesheet" href="${rc.contextPath}/stylesheets/loading.css" />
    <link rel="stylesheet" href="${rc.contextPath}/stylesheets/tips.css"/>

    <script src="${rc.contextPath}/assets/js/jquery.2.1.1.min.js"></script>
    <style>
        .widget-toolbar::before{border:0px;}
        .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
            border-top: 2px solid #C6487E!important;
        }
        .gritter-center{top:40%}
    </style>
</head>

<body class="no-skin" style="background-color: #FFF;">
	<div class="page-content">
		<div class="tabbable">
			<div class="tab-content">
				<div id="manage" class="tab-pane active in">
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="widget-box">
                                <div class="widget-header widget-header-small">
                                    <h5 class="widget-title lighter">品类满意度分析</h5>
                                </div>
                                <div class="widget-body" style="background-color: #EFF3F8;">
                                    <div class="widget-main">
                                        <form class="form-inline" id="searchForm" method="post" action="#">
                                            <div class="form-group">
                                                <label><span style="font-weight: bold;">选择时段</span>
                                                    <input type="text" style="height: 30px; width: 180px;" id="config-demo" name="chooseTimeVO" class="form-control time" >
                                                    <button id="dayBtn" type="button" onclick="replaceDate(this,'1');selectTime('1');" class="btn btn-white btn-sm">
                                                        <span class="ace-icon icon-on-right bigger-110"></span>
                                                        昨日
                                                    </button>
                                                    <button id="weekBtn" type="button" onclick="replaceDate(this,'7');selectTime('7');" class="btn btn-white btn-sm">
                                                        <span class="ace-icon icon-on-right bigger-110"></span>
                                                        过去7天
                                                    </button>
                                                    <button id="monthBtn" type="button" onclick="replaceDate(this,'31');selectTime('31');" class="btn btn-white btn-sm">
                                                        <span class="ace-icon icon-on-right bigger-110"></span>
                                                        过去31天
                                                    </button>
                                                </label>
                                                <button id="rateSearch" type="button" class="btn btn-pink btn-sm" style="margin-left: 50px;">
                                                    <span class="ace-icon fa fa-search icon-on-right bigger-110"></span> Search
                                                </button>
                                                <input type="text" hidden="true" id="selectedTime" value="${(favorcompReq.selectedTime)!'7'}">
                                                <input type="text" hidden="true" id="customSelectedTime" value="${favorcompReq.chooseTime!''}">
                                                <input type="text" hidden="true" id="initSelectedTime" value="${favorcompReq.selectedTime!''}">
                                                <input type="text" hidden="true" id="_csrf" name="${_csrf.parameterName}" value="${_csrf.token}" />
                                                <input type="text" hidden="true" id="categoryName" value="${favorcompReq.categoryName!''}" >
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                         </div>
                       </div>
                       <div class="row">
                          <div class="col-xs-12" id="favorcompCol">
                              <div class="widget-box">
                                  <div class="widget-header widget-header-small">
                                      <h4 style="color:#000;"><span>各品类满意度对比</span>
                                          <label class="help_img">
                                              <i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#6f727f!important;"></i>
                                              <span class='tips'>一段时间内各品类好评量的对比图<span class="content_name"></span><s></s></span>
                                          </label>
                                      </h4>
                                  </div>
                                  <div class="widget-body">
                                      <div id="favorcomp" style="height:380px; padding-top: 10px; cursor: pointer;"></div>
                                  </div>
                              </div>
                          </div>
                       </div>

                        <div class="row" id="favorOrientDiv">
                            <div class="col-xs-6" id="favorOrientCol">
                                <div class="widget-box">
                                     <div class="widget-header widget-header-small">
                                        <h4 style="color:#000;"><span id="keyWordName1"></span>
                                            <label class="help_img">
                                                <i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#6f727f!important;"></i>
                                                <span class='tips'>一段时间内好评率的走势<span class="content_name"></span><s></s></span>
                                            </label>
                                        </h4>
                                    </div>
                                    <div class="widget-header widget-header-small" style="height:390px;">
                                        <div id="favorOrient" style="height:360px;"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-6" id="favorateDiv" style="padding-left: 0px!important;">
                                <div class="widget-box">
                                    <div class="widget-header widget-header-small">
                                        <h4 style="color:#000;"><span id="keyWordName2"></span>
                                            <label class="help_img">
                                                <i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#6f727f!important;"></i>
                                                <span class='tips'>一段时间内好中差评的比率<span class="content_name"></span><s></s></span>
                                            </label>
                                        </h4>
                                    </div>
                                    <div class="widget-header widget-header-small" style="height:390px;">
                                        <div id="favorate" style="height:390px; cursor: pointer;"></div>
                                    </div>
                                </div>
                           </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


<script src="${rc.contextPath}/assets/js/jquery-2.1.4.min.js"></script>
<script src="${rc.contextPath}/assets/js/ace-extra.min.js"></script>
<script src="${rc.contextPath}/assets/js/user/base.js"></script>
<script src="${rc.contextPath}/assets/js/bootstrap.min.js"></script>
<!-- page specific plugin scripts -->
<script src="${rc.contextPath}/assets/js/jquery-ui.min.js"></script>
<script src="${rc.contextPath}/assets/js/jquery.ui.touch-punch.min.js"></script>
<script src="${rc.contextPath}/assets/js/jquery.gritter.min.js"></script>
<script src="${rc.contextPath}/assets/js/moment.min.js"></script>
<script src="${rc.contextPath}/assets/js/bootstrap-datetimepicker.min.js"></script>
<script src="${rc.contextPath}/javascripts/daterangepicker.js"></script>
<!-- ace scripts -->
<script src="${rc.contextPath}/assets/js/ace-elements.min.js"></script>
<script src="${rc.contextPath}/assets/js/ace.min.js"></script>
<script type="text/javascript" src="${rc.contextPath}/javascripts/loading.js"></script>
<script src="${rc.contextPath}/javascripts/dateRange.js"></script>
<script type="text/javascript" src="${rc.contextPath}/javascripts/g2.js"></script>
<script type="text/javascript" src="${rc.contextPath}/javascripts/g2-modal.js"></script>
<script src="${rc.contextPath}/javascripts/slider.js"></script>
<script src="${rc.contextPath}/javascripts/d3.min.js"></script>
<script type="text/javascript" src="${rc.contextPath}/javascripts/FileSaver.js"></script>		
<script type="text/javascript" src="${rc.contextPath}/javascripts/export-csv.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("#rateSearch").click();
    });

    $("#rateSearch").on("click", function () {
        searchCommentRate();
    });

    function isNull(str) {
        if(null == str || "" == str) {
            return true;
        }
        return false
    }

    // 1. 各品类满意度占比
    function searchCommentRate() {

        $("#favorcomp").empty();
        $("#favorOrient").empty();
        $("#favorate").empty();

        var data = {};
        var parameterName = $("#_csrf").attr("name");
        var token = $("#_csrf").val();
        data[parameterName] = token;
        if(!isNull($("#customSelectedTime").val())) {
            data["chooseTime"] = $("#customSelectedTime").val();
            $("#config-demo").val($("#customSelectedTime").val());
            if(isNull($("#selectedTime").val())) {
                $(".btn.btn-white.btn-sm.btn-info").removeClass("btn-info");
            }
        } else {
            data["chooseTime"] = $("#config-demo").val();
        }

        $.ajax({
            url: "${rc.contextPath}/category/getAllCategoryRankChart",
            data: data,
            type: "POST",
            dataType:"json",
            beforeSend: function () {
                $("#rateSearch").attr("disabled", true);
                openPartialLayer($("#favorcompCol"));
                openPartialLayer($("#favorOrientCol"));
                openPartialLayer($("#favorateDiv"));
            },
            complete: function () {
                $("#rateSearch").attr("disabled", false);
                removeLoading($("#favorcompCol"));
            },
            success: function (data) {
                if (data != "" && data != null && data.commentRateChart != null && data.commentRateChart.length > 0) {
                    var c = data.categoryName;
                    var chart1 = null;
                    try {
                    	var	exportForm={
								'headers':['品类','好评量','中评量','差评量'],
								'cols':['category','好评量','中评量','差评量']
						};
                        chart1 = makeGroupBarGraphModal(data.commentRateChart, c, "品类", "比率%", "favorcomp", 360, "图例",exportForm);
                    } catch(error) {
                        renderChartError("各品类满意度对比图错误:" + error, "favorcomp", 360, "rateSearch", data);
                        $("#favorOrientDiv").hide();
                        $("#favorateDiv").hide();
                    } finally {
                        removeLoading($("#favorcompCol"));
                    }

                    if(null != chart1) {
                        chart1.on('plotclick', function (ev) {
                            $("#favorcomp").css("cursor", "pointer");
                            $("#rateSearch").attr("disabled", true);
                            var data = ev.data;
                            if (data) {
                                openPartialLayer($("#favorOrientCol"));
                                openPartialLayer($("#favorateDiv"));

                                var title = data._origin.品类;
                                $("#keyWordName1").html(title + "  满意度趋势");
                                $("#keyWordName2").html(title + "  满意度占比");

                                // 2. 满意度趋势
                                makeOrientChart(title);
                                // 3. 满意度占比
                                $("#categoryName").val(title);
                                makeRateChart($("#categoryName").val());
                            }
                            $("#rateSearch").attr("disabled", false);
                        });
                    }
                    if(!isNull($("#categoryName").val())) {
                        var name = $("#categoryName").val();
                        $("#keyWordName1").html(name + "  满意度趋势");
                        $("#keyWordName2").html(name + "  满意度占比");
                        makeOrientChart(name);
                        makeRateChart(name);
                        $("#categoryName").val("");
                    } else {
                        var name = data.categoryName[0];
                        $("#keyWordName1").html(name + "  满意度趋势");
                        $("#keyWordName2").html(name + "  满意度占比");
                        makeOrientChart(name);
                        makeRateChart(name);
                    }

                } else {
                    makeGroupBarGraphModal(null, null, "品类", "比率%", "favorcomp", 360, "图例");
                    $("#favorateDiv").hide();
                    $("#favorOrientDiv").hide();
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest);
            }
        });
    }

    function renderChartError(error, id, height, searchId, data) {

        console.error(error);
        console.log(data);
        tips(id, height);
        $("#" + searchId).attr("disabled", false);
    }

    // 2. 满意度趋势
    function makeOrientChart (categoryName) {
        $("#favorOrientDiv").show();
        $("#favorOrient").empty();
        var data = {};
        data[$("#_csrf").attr("name")] = $("#_csrf").val();

        if(!isNull($("#customSelectedTime").val())) {
            data["chooseTime"] = $("#customSelectedTime").val();
        } else {
            data["chooseTime"] = $("#config-demo").val();
        }
        data["categoryName"] = categoryName;
        $.ajax({
            url: "${rc.contextPath}/category/getOneCommentOrient",
            data: data,
            type: "POST",
            dataType:"json",
            success: function (data) {
                if (data != "" && data != null && data.commentOrientChart != null && data.commentOrientChart.length > 0) {
                    try{
                    	var compare = function(a,b){
	        				var pa=3;
	        				var pb=3;
	        				if(a.type=="好评"){
	        					pa=1;
	        				}else if(a.type=="中评"){
	        					pa=2;
	        				}
	        				if(b.type=="好评"){
	        					pb=1;
	        				}else if(b.type=="中评"){
	        					pb=2;
	        				}
	        				if(a.month!=b.month){
	        					return a.month>b.month?1:-1;
	        				}else{
	        					return pa>pb?1:-1;
	        				}
	        			}
                    	var	exportForm={
								'headers':  ['日期','评论等级','占比'],
								'cols':	    ['month', 'type', 'rate'],
								'compareMethod': compare
						};
                        lineChartModal(data.commentOrientChart,'favorOrient','month','rate','type','','','360',"",exportForm);
                    } catch (error) {
                        renderChartError("满意度趋势图错误:" + error, "favorOrient", 360, "rateSearch", data);
                    } finally {
                        removeLoading($("#favorOrientCol"));
                    }
                } else {
                    tips("favorOrient", 360);
                }
            },
            error: function (XMLHttpRequest) {
                console.log(XMLHttpRequest);
            },
            complete: function () {
                removeLoading($("#favorOrientCol"));
            }
        });
    }

    // 3. 满意度占比
    function makeRateChart (categoryName) {
        $("#favorateDiv").show();
        $("#favorate").empty();
        var data = {};
        data[$("#_csrf").attr("name")] = $("#_csrf").val();
        if(!isNull($("#customSelectedTime").val())) {
            data["chooseTime"] = $("#customSelectedTime").val();
        } else {
            data["chooseTime"] = $("#config-demo").val();
        }
        data["categoryName"] = categoryName;
        $.ajax({
            url: "${rc.contextPath}/category/getOneCategoryRankChart",
            data: data,
            type: "POST",
            dataType:"json",
            success: function (data) {
                if (data != "" && data != null) {
                    var chart = null;
                    try {
                    	var exportForm={//定义导出csv的表头与对应列
                    		'headers':['评价等级','占比'],
                    		'cols':['name','value']
                    	};
                        chart = pieChartModal(data.categoryRateChart, "favorate", 'name','value',360,"",exportForm);
                    } catch (error) {
                        renderChartError("满意度占比图错误:" + error, "favorate", 360, "rateSearch", data);
                    } finally {
                        removeLoading($("#favorateDiv"));
                    }
                    chart.on('plotclick',function(ev){
                        openPartialLayer($("#favorateDiv"));
                        var commentDays = $('#selectedTime').val();
                        var categoryName = $("#keyWordName2").text().replace("满意度占比","").trim();
                        if(!isNull(categoryName) && typeof categoryName == "string" && categoryName.indexOf("+") != -1) {
                            categoryName = categoryName.replace("+", "%2B");
                        }
                        // 好评 差评
                        var senseTypeName = ev.data._origin.name;
                        var chooseTime = $("#config-demo").val();
                        var url = "${rc.contextPath}/comment/list?flag=2&senseTypeName=" + senseTypeName +
                        "&categoryName=" + categoryName + "&chooseTime=" + chooseTime;
                        if(commentDays){
                            url +="&overviewDay=" + commentDays;
                        }
                        location.href =  url;
                    });
                } else {
                    tips("favorate", 360);
                }
            },
            error: function (XMLHttpRequest) {
                console.log(XMLHttpRequest);
            },
            complete: function () {
                removeLoading($("#favorateDiv"));
            }
        });
    }
    //设置选择的时间
    var selectTime = function(selectedTime){
        $('#selectedTime').val(selectedTime);
        $("#customSelectedTime").val("");
    };
    $("#config-demo").change(function(){
        $("#customSelectedTime").val($('#config-demo').val());
        $("#selectedTime").val("");
    });
    window.onload = function() {
        var initSelectedTime = $("#initSelectedTime").val();
        //选中时间回显
        if(initSelectedTime){
            if(initSelectedTime === '1'){
                replaceDate($('#dayBtn'),'1');
                $('#selectedTime').val('1');
            }else if(initSelectedTime === '7'){
                replaceDate($('#weekBtn'),'7');
            }else if(initSelectedTime === '31'){
                replaceDate($('#monthBtn'),'31');
                $('#selectedTime').val('31');
            }else if(initSelectedTime === '365'){
                setCustomChooseTime(365);
            }else if(initSelectedTime === '15'){
                setCustomChooseTime(15);
            }
        }
        $("#rateSearch").click();
    };
</script>
</body>
</html>